<template>
    <div>
        <el-upload
            :action="data.action || 'auto'"
            list-type="picture-card"
            :file-list="sls_filelist"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
        </el-upload>
    </div>
</template>
<script>
import Common from "./js/Common";
var Js = Common("sls-multi-upload");
Js.mixins = [
  {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handleRemove(file, fileList) {
        let fileIndex = (() => {
          for (let index in this.fileList) {
            if (file.url == this.fileList[index].url) {
              return index;
            }
          }
        })();
        console.log(file, fileList);
        this.fileList.splice(fileIndex);
      },
      handlePictureCardPreview(file) {},
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        } else {
          this.$$api_common_upload({
            data: file,
            fn: data => {
              console.dir(data);
              this.fileList.push({ url: data._url });
            }
          });
        }
        return false;
      }
    },
    computed: {
      sls_filelist() {
        if (!this.fileList.length) {
          if (!!this.submit_data[this.data.key]) {
            let list = [];
            for (let picUrl of this.submit_data[this.data.key].split(",")) {
              list.push({ url: picUrl });
            }
            this.fileList = list;
          }
        } else {
          this.submit_data[this.data.key] = this.fileList
            .map(x => x.url)
            .join(",");
        }
        return this.fileList;
      }
    }
  }
];
export default Js;
</script>
<style scoped lang="less"></style>